<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改员工信息</title>
    <link rel="stylesheet" href="./css/style.css">
    <!--引入vue相关的js文件-->
    <script src="./js/vue.js"></script>
    <script src="./js/axios.min.js"></script>
</head>
<body>
<div class="container" id="app">
    <h2>修改用户信息</h2>
    <form id="editEmployeeForm" action="javascript:void(0)">
        <input type="hidden" id="editEmpId" name="empId">
        <!-- 其他字段类似新增页面 -->
        <div class="form-group">
            <label for="user_id">用户编号</label>
            <input v-model="editUserData.user_id" type="text" id="user_id" name="user_id" required></div>
        <div class="form-group">
            <label for="nickname">昵称</label>
            <input v-model="editUserData.nickname" type="text" id="nickname" name="nickname" required>
            </div>
        <div class="form-group">
            <label for="gender">性别</label>
            <input v-model="editUserData.gender" type="text" id="gender" name="gender" required>
        </div>
        <div class="form-group">
            <label for="contact">联系方式</label>
            <input v-model="editUserData.contact" type="text" id="contact" name="contact" required>
        </div>
            <div class="form-group">
            <label for="birthday">生日</label>
            <input v-model="editUserData.birthday" type="date" id="birthday" name="contact" required>
        </div>
        <div class="form-group">
            <label for="birthday">目标职业</label>
            <input v-model="editUserData.career_direction" type="text" id="career_direction" name="contact" required>
        </div>
        <div class="form-group">
            <label for="graduation_year">毕业年份</label>
            <input v-model="editUserData.graduation_year" type="text" id="graduation_year" name="graduation_year"
                   required>
        </div>
        <div class="form-group">
            <label for="user_password">密码</label>
            <input v-model="editUserData.user_password" type="text" id="user_password" name="user_password" required>
        </div>
        <div class="form-group">
            <label for="status">状态</label>
            <input v-model="editUserData.status" type="text" id="status" name="status" required>
        </div>
        <div class="form-group">
            <label for="error_count">错误计数</label>
            <input v-model="editUserData.error_count" type="text" id="error_count" name="error_count" required>
        </div>
        <button @click="editUser">保存修改</button>
    </form>
</div>
<script>
    new Vue({
        el:"#app",
        created:function () {
            this.getUserById();
        },
        data:{
            editUserData:{
                nickname: '',
                gender: '',
                contact: '',
                birthday: '',
                career_direction: '',
                graduation_year: '',
                user_password: ''
            }
        },
        methods:{
            getUserById:function () {
                let user_id = localStorage.getItem("user_id");
                axios({
                    url:"/pns/getUserById",
                    method:"get",
                    params:{user_id: user_id}
                }).then(result=>{
                    let code = result.data.code;
                    if (code == "200"){
                        this.editUserData = result.data.data;
                    }
                });
            },
            editUser:function () {
                axios({
                    url:"/pns/updateUser",
                    method:"get",
                    params:this.editUserData
                }).then(result=>{
                    let code = result.data.code;
                    if (code == "200"){
                        alert("修改成功");
                        //重新查询
                        location.href="/pns/main.html"
                    }else{
                        alert(result.data.msg);
                    }
                });
            }
        }
    });
</script>
</body>
</html>